<template>
    <div class="px-[20px] py-[10px]">
        <div v-if="data" class="flex justify-between">
            <DeviceBaseInfo :data="data"></DeviceBaseInfo>
            <!-- <FaultStatistics></FaultStatistics> -->
            <InstrumentIndicators :data="data.meters"></InstrumentIndicators>
        </div>
        <ProductAnalysis :data="data" v-if="data"></ProductAnalysis>
    </div>
</template>
<script setup lang="ts">
import { apiGetDeviceInfo } from '@/http/api';
import DeviceBaseInfo from './DeviceBaseInfo.vue';
import InstrumentIndicators from './InstrumentIndicators.vue';
import ProductAnalysis from './ProductAnalysis.vue';
let name: string = '';
let parent_name: string = '';
let group_second_name: string = '';
const route = useRoute();
const data = ref<any>();
const getData = async () => {
    try {
        const res = await apiGetDeviceInfo({
            device_name: name,
            group_parent_name: parent_name,
            group_second_name: group_second_name,
        });
        data.value = res.data;
    } catch (error) { }
};
onBeforeMount(() => {
    route.query.name && (name = route.query.name as string);
    route.query.parent_name && (parent_name = route.query.parent_name as string);
    route.query.group_second_name && (group_second_name = route.query.group_second_name as string);

    getData();
});
</script>
<style lang="scss" scoped></style>
